<script lang="ts" setup>

import {computed, onMounted} from "vue";

interface Prop {
    modelValue: boolean
    title:string
    width:number
}

const props = defineProps<Prop>()
const emit = defineEmits(["update:modelValue"])

onMounted(() => {
    console.log(props.modelValue)
})

const value = computed({
    get(){
        return props.modelValue
    },
    set(value){
        emit("update:modelValue",value)
    }
})

</script>

<template>
    <el-dialog
            v-model="value"
            :title="props.title"
            :style="'width:'+ width+'px;'"
            destroy-on-close
            draggable
            align-center
    >
        <slot name="context"/>
        <template #footer>
            <slot name="footer">

            </slot>
        </template>
    </el-dialog>
</template>

<style scoped>

</style>